<template>
	<div class="page">
		<u-navbar title="拼团活动">
		</u-navbar>
		<div class="global-list" v-if="pinTuanList.length != 0">
			<div class="global-item" @click="handleClickBill(item)" v-for="(item,index) in pinTuanList" :key="index">

				<div class="flex global-top-col">
					<div class="global-name font-32">{{item.promotionName}}</div>
					<div class="global-orderStatus">{{item.promotionStatus | promotionStatus}}</div>
				</div>
				<div class="global-bottom-col flex">
					<div class="global-createTime">开始时间{{item.startTime}}</div>
					<div class="global-createTime">结束时间{{item.endTime}}</div>
				</div>
			</div>
		</div>
		<popup date ref="popup" @clear="load" @callback="screened" />
	</div>
</template>

<script>
	import {
		getPinTuanList
	} from "@/api/promotion.js";
	import popup from "@/components/m-popup/index";
	export default {
		components: {
			popup,
		},
		watch: {
			current(index) {
				this.searchForm.promotionStatus = this.list[index].value;
				this.load();
			},
		},
		filters: {
			promotionStatus(val) {
				let status = {
					NEW: "未开始",
					START: "已开始",
					END: "已结束",
					CLOSE: "已关闭",
				};
				return status[val];
			},
		},
		data() {
			return {
				pinTuanList: [], //投诉列表
				current: 0,
				searchForm: {
					// 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "startTime", // 默认排序字段
					order: "desc", // 默认排序方式
					startDate: "", // 起始时间
					endDate: "", // 终止时间
				},
				list: [{
						name: "全部",
						value: "",
					},
					{
						name: "已出账",
						value: "OUT",
					},
					{
						name: "已对账",
						value: "CHECK",
					},
					{
						name: "已审核",
						value: "EXAMINE",
					},
					{
						name: "已完成",
						value: "COMPLETE",
					},
				],
			};
		},

		methods: {
			onShow() {
				this.pinTuanList = [];
				this.searchForm.pageNumber = 1;
				this.init();
				
				uni.$on("refresh", res => {
						this.pinTuanList = [];
						this.searchForm.pageNumber = 1;
						this.init();
				    uni.$off('refresh');// 清除监听
				})
			},
			onReachBottom() {
				this.searchForm.pageNumber++;
				this.init();
			},
			// 点击订单
			handleClickBill(val) {
				uni.navigateTo({
					url: `/pages/goods/promotion/pintuan/detail?id=${val.id}`,
				});
			},
			// 筛选回调
			screened(val) {
				val.date[0] ? (this.searchForm.startDate = val.date[0]) : "";
				val.date[1] ? (this.searchForm.endDate = val.date[1]) : "";
				this.load();
			},

			// 点击筛选
			handleClickScreen() {
				this.$refs.popup.open();
			},
			changeTabs(index) {
				this.current = index;
			},

			load() {
				this.searchForm.pageNumber = 1;
				this.searchForm.startDate = "";
				this.searchForm.endDate = "";
				this.pinTuanList = [];

				this.init();
			},
			async init() {
				uni.showLoading({
					title: "加载中",
				});

				//商品订单
				let res = await getPinTuanList(this.searchForm);
				if (res.data.success) {
					this.pinTuanList.push(...res.data.result.records);
				}

				uni.hideLoading();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/components/global.scss";

	.global-bottom-col {
		margin: 0;
	}

	.global-createTime {
		margin: 10rpx 0;
	}

	.drop-list-tab {
		overflow: hidden;
		flex: 4 !important;
	}

	.drop-list-config {
		flex: 1;
		padding-bottom: 10rpx;
	}
</style>
